<% 
  var headContent = {
%>
<!-- //这里包含需要引入的其他css/js文件 -->

<style>
 /*验证：提示信息样式 begin*/
 .am-alert-danger {
    background-color: transparent;
    border-color: transparent;
    color: red;
  }
  .am-alert {
    margin-bottom: 1em;
    padding: .625em;
    background: transparent;
    border: none;
    border-radius: 0;
  }
  /*验证：提示信息样式 end*/
</style>
<%};%>
<%layout("/common/_layout.html",{head:headContent}){%>

<form class="am-form" id="businessForm" action="${base}/business/update" method="post">
  <div  class="am-tabs am-margin">
  
          <ul class="am-tabs-nav am-nav am-nav-tabs">
          <li class="am-active"><a id="title" name="title" href="#tab1"> 资费业务详情</a>                 
          </li>
  
          </ul>

        <div class="am-tabs-bd">
	         <div class="am-tab-panel am-fade am-in am-active" id="tab1">
	     
		       <div class=" am-g am-margin-top am-form-group">
              <div class="am-g am-margin-top">
                <div class="am-u-sm-4 am-u-md-2 ">
                 	 业务名称
                </div>
                <div class="am-u-sm-12 am-u-md-4">
                  <input type="text" class="am-input-sm js-pattern-businessName" value="${businessName!}" name="businessName"  id="businessName" placeholder="请输入 业务名称"  data-validation-message="请输入 业务名称" required/>
                </div>
                <div class="am-hide-sm-only am-u-md-1" style="color:red;">*</div>
                <div class="am-u-sm-2 am-u-md-5 input-msg">
                    <div class="am-alert am-alert-danger">${businessNameMessages!}</div>
                </div>
                <!-- <label for="productname" generated="true" class="error"></label> -->
              </div>
              </div>
               <div class=" am-g am-margin-top am-form-group">
              <div class="am-g am-margin-top">
                <div class="am-u-sm-4 am-u-md-2 ">
                 	 业务代码
                </div>
                <div class="am-u-sm-12 am-u-md-4">
                  <input type="text" class="am-input-sm js-pattern-businessCode" value="${businessCode!}" name="businessCode" id="businessCode" placeholder="输入业务代码" data-validation-message="请输入业务代码(数字或字母)" required/>
                </div>
                 <div class="am-hide-sm-only am-u-md-1" style="color:red;">*</div>
                <div class="am-u-sm-2 am-u-md-5 input-msg" >
                    <div class="am-alert am-alert-danger">${businessCodeMessages!}</div>
                </div>  
              </div>  
              </div>
              
              <div class=" am-g am-margin-top am-form-group">
              <div class="am-g am-margin-top">
                <div class="am-u-sm-4 am-u-md-2 ">
                                                             接口url
                </div>
                <div class="am-u-sm-12 am-u-md-4">
                  <input type="text" class="am-input-sm" value="${portUrl!}" name="portUrl" id="portUrl" placeholder="输入接口url" data-validation-message="请输入接口url" />
                </div>
                 <div class="am-hide-sm-only am-u-md-1" style="color:red;"></div>
                <div class="am-u-sm-2 am-u-md-5 input-msg" >
                 
                </div>  
              </div>  
              </div>
              
              <div class=" am-g am-margin-top am-form-group">
              <div class="am-g am-margin-top">
                <div class="am-u-sm-4 am-u-md-2 ">
                                                             是否启用
                </div>
                <div class="am-u-sm-12 am-u-md-4 switch-button">
                 <input id="switch"  name="switch" type="checkbox" data-size='xs' data-am-switch  data-off-text="已禁用" data-on-text="已启用"
                 <%if (enabled==1){%>
                    checked                                                        
                 <%}%>
                 >
                   <input type="hidden" class="am-input-sm" name="enabled" id="enabled" value="${enabled}"/>
                   <input type="hidden" class="am-input-sm" name="edit" id="edit" value="${edit}"/>
                   <input type="hidden" class="am-input-sm" name="id" id="id" value="${id}"/>
                </div>
                 <div class="am-hide-sm-only am-u-md-1" style="color:red;"></div>
                <div class="am-u-sm-2 am-u-md-5 input-msg" >
                 
                </div>  
              </div>  
              </div>
              
               <div class=" am-g am-margin-top am-form-group">
              <div class="am-g am-margin-top">
                <div class="am-u-sm-4 am-u-md-2 ">
                                                             备注
                </div>
                <div class="am-u-sm-12 am-u-md-4">
                  <input type="text" class="am-input-sm" value="${remark!}" name="remark" id="remark" placeholder="输入备注" data-validation-message="备注"/>
                </div>
                 <div class="am-hide-sm-only am-u-md-1" style="color:red;"></div>
                <div class="am-u-sm-2 am-u-md-5 input-msg" >
                 
                </div>  
              </div>  
              </div>
              
              
              <div class="am-g">
		      <button type="submit" class="am-btn am-btn-primary am-btn-xs" >提交保存</button>
		      <button type="button" class="am-btn am-btn-warning am-btn-xs" onclick="javascript: History.back();">返回上一级</button>
		    </div>
             
	    </div>
	         
	    
        </div>
  </div>
</form>
  <script type="text/javascript">
 
  
  
     
  $(function(){
            
	  var $mycheckbox = $('.switch-button');
      $mycheckbox.each(function(){
         
       
          $("#switch").on({
              'switchChange.bootstrapSwitch': function(event, state) {
            	  if(state.toString()=="true"){
                      $("#enabled").val("1");
                  }else{
                      $("#enabled").val("0");
                  }
            	  console.log($("#enabled").val());
              }
          });
      });

      
	  /*表单验证：begin*/
      //自定义规则，用法：验证元素上加class="js-pattern-sort"
      if ($.AMUI && $.AMUI.validator) {
        $.AMUI.validator.patterns.businessCode = /^([0-9a-zA-Z]+)$/;
      }
      
      $("#businessForm").validator({
        // 域通过验证时回调
        onValid: function(validity) {
          $(validity.field).closest('.am-form-group').find('.am-alert').hide();
        },
        // 验证出错时的回调， validity 对象包含相关信息，格式通 H5 表单元素的 validity 属性
        onInValid: function(validity) {
        	
          var $field = $(validity.field);
          var $group = $field.closest('.am-form-group');
          var $alert = $group.find('.am-alert');
          // 使用自定义的提示信息 或 插件内置的提示信息
          var msg = $field.data('validationMessage') || this.getValidationMessage(validity);
  
          if (!$alert.length) {
            $alert = $("<div class='am-alert am-alert-danger'></div>").hide().
            appendTo($group.find(".input-msg"));
          }
          console.log("onInValid : "+$field.val());
          $alert.html(msg).show();
        }
      });
      /*表单验证：end*/
            
  });
  </script>
<%}%>